<template>
  <view class="table-body">
    <!-- 父级行 -->
    <view class="parent-row" @click="toggleExpand()">
      <view class="col name">
        <uni-icons :type=" item.goodsTitle!='合计' &&  expanded!=null ? (expanded ? 'arrowup' : 'arrowdown'):''"
                   size="16"
                   color="#666"/>
        {{ item.goodsTitle }}
      </view>
      <view class="col">{{ item.inventoryQuantity }}</view>
      <view class="col">{{ item.saleQuantity }}</view>
      <view class="col">{{ item.turnoverQuantity }}</view>
    </view>

    <!-- 子级行（展开时显示） -->
    <view v-if="expanded" class="child-rows">
      <view v-for="child in childList" :key="child.id" class="child-row">
        <view class="child-row-click" @click="openChildExpand(child)">
          <view class="col name">
            <uni-icons :type="child.expanded ? 'arrowup' : 'arrowdown'" size="16"
                       color="#666"/>
            {{ child.specsTitle }}
          </view>
          <view class="col">{{ child.inventoryQuantity }}</view>
          <view class="col">{{ child.saleQuantity }}</view>
          <view class="col">{{ child.turnoverQuantity }}</view>
        </view>
        <view class="grandchild-rows" v-if="childList.length==0">
          <uni-load-more :status="loadingStatus"/>
        </view>

        <!-- 子级行（展开时显示） -->
        <view class="grandchild-rows" v-if="child.expanded">
          <view v-for="child1 in dowList" :key="child1.id" class="grandchild-row">
            <view class="grandchild-row-click">
              <view class="col name">{{ child1.shopName }}</view>
              <view class="col">{{ child1.inventoryQuantity }}</view>
              <view class="col">{{ child1.saleQuantity }}</view>
              <view class="col">{{ child1.turnoverQuantity }}</view>
            </view>
          </view>
          <view class="grandchild-rows" v-if="dowList.length==0">
            <uni-load-more :status="loadingStatus"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import UniLoadMore from "../../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue";
import SMS from "../../functional/popup/SMS.vue";
import UniIcons from "../../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import _ from "lodash";
import {getAction} from "../../../utils/action";

export default {
  name: "goodsListView",
  components: {UniLoadMore, SMS, UniIcons},
  props: {
    item: Object,
    ShopName: String,
    classifyName: String,
    classifyRange: Array,
    timeRange: Array, // 存储时间段[开始日期,结束日期]
  },
  computed: {
    icon() {
      if (!this.item.totalpercentage) return '../static/xintu/down.png'
      return Number(this.item.totalpercentage.replace("%", "")) > 0 ? '../static/xintu/top.png' : '../static/xintu/down.png'
    }
  },
  data() {
    return {
      childList: [], // 第二级
      dowList: [], //最底级
      expanded: false,
      childExpanded: false,
      loadingStatus: 'more',
      url: {
        specsList: "api/boss/specsList",
        shopList: "api/boss/shopList"
      }
    }
  },
  mounted() {
    this.expanded = this.item.expanded
  },
  methods: {
    // 切换展开状态
    async toggleExpand() {
      if (item.goodsTitle == '合计') return
      this.$set(this, 'expanded', !this.expanded); // 只需这一行
      if (this.expanded) {
        this.loadingStatus = "loading";
        let queryParam = {}
        if (this.timeRange.length == 2) {
          const [startDate, endDate] = this.timeRange;
          queryParam.startTime = startDate
          queryParam.endTime = endDate
        }
        if (this.classifyRange.length > 0) {
          queryParam.classifyId = this.classifyRange[0].value
        }
        if (this.ShopName.length > 0) {
          queryParam.ShopName = this.ShopName
        }
        queryParam.classifyName = this.classifyName
        queryParam.id = this.item.goodsId
        let res = await getAction(this.url.specsList, queryParam)
        if (res.success) {
          this.childList = _.cloneDeep(res.result)
          this.childList = this.childList.map(item => ({...item, expanded: false}))
        }
        this.$nextTick(() => {
          this.loadingStatus = 'noMore';
        })
      }

    },
    //子项展开状态
    async openChildExpand(child) {
      this.childList = this.childList.map(item => {
        if (item.specsId === child.specsId) {
          return {...item, expanded: !item.expanded}
        }
        return {...item, expanded: false} // 确保单层展开
      })
      console.log(child.expanded)
      if (!child.expanded) {
        this.loadingStatus = "loading";
        let queryParam = {}
        if (this.timeRange.length == 2) {
          const [startDate, endDate] = this.timeRange;
          queryParam.startTime = startDate
          queryParam.endTime = endDate
        }
        if (this.classifyRange.length > 0) {
          queryParam.classifyId = this.classifyRange[0].value
        }
        if (this.ShopName.length > 0) {
          queryParam.ShopName = this.ShopName
        }
        queryParam.classifyName = this.classifyName
        queryParam.specsId = child.specsId
        queryParam.goodsId = child.goodsId
        let res = await getAction(this.url.shopList, queryParam)
        if (res.success) {
          this.dowList = res.result
        }
        this.$nextTick(() => {
          this.loadingStatus = 'noMore';
        })
      }
    },
  }
}
</script>
<style scoped lang="scss">
.parent-row {
  background-color: #fff;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.8fr;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #eee;
}

.child-row {
  border-bottom: 1rpx solid #eee;

  &::before {
    content: "";
    position: absolute;
    left: 20rpx;
    top: 50%;
    width: 15rpx;
    height: 1px;
  }

  .child-row-click {
    height: 75rpx;
    grid-template-columns: 2fr 1fr 1fr 0.8fr;
    display: grid;
    align-items: center;
    position: relative;
  }
}

.grandchild-row {
  padding-left: 50rpx; // 三级缩进
  border-top: 1rpx solid #eee;

  .grandchild-row-click {
    height: 75rpx;
    grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
    display: grid;
    align-items: center;
    position: relative;
  }
}

.col {
  flex: 1;
  text-align: center;
  font-size: 22rpx;
  color: #333;

  .icon-group {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;

    // 添加过渡动画
    transition: transform 0.3s ease;

    &:active {
      transform: scale(0.9); // 点击反馈
    }

    .icon {
      width: 1em; // 使用相对单位
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor; // 继承父级颜色
    }
  }
}

.name {
  text-align: left !important;
  padding-left: 55rpx;
}

.child-row .name {
  padding-left: 80rpx;
}

.action {
  display: flex;
  justify-content: center;
}

.child-row {
  border-bottom: 1rpx solid #eee;

  &::before {
    content: "";
    position: absolute;
    left: 20rpx;
    top: 50%;
    width: 15rpx;
    height: 1px;
  }

  .child-row-click {
    height: 75rpx;
    grid-template-columns: 2fr 1fr 1fr 0.8fr;
    display: grid;
    align-items: center;
    position: relative;
  }
}
</style>